<template>
    <div>
        <div v-bind:class="{'panel__pad': panel}">
            <ul class="tabs">
                <li class="tabs__tab" v-for="tab in tabs" :class="{'tabs__tab--active': tab.isActive }" v-on:click="selectTab(tab)">
                    {{ tab.name }}
                </li>
            </ul>
        </div>
        <div>
            <slot></slot>
        </div>
    </div>
</template>
<script>

    export default {
        data() {
            return {
                tabs: []
            }
        },

        props: {
            'panel': {
                default: true
            }
        },

        created() {
            this.tabs = this.$children;
        },

        methods: {
            selectTab(selectedTab) {
                this.tabs.forEach(tab => {
                    tab.isActive = (tab.name == selectedTab.name);
                })
            }
        },


    }
</script>